<template>
  <div v-if="filmList">
    <detail-header v-scroll="1">
      {{ filmList.name }}
    </detail-header>
    <div
      :style="{
        backgroundImage: 'url(' + filmList.poster + ')',
      }"
      class="poster"
    ></div>
    <div class="box">
      <div class="center">
        <div class="center-name">{{ filmList.name }}</div>
        <div style="font-size: 13px; color: #797d82">
          <div class="conten-text">{{ filmList.category }}</div>
          <div class="conten-text">
            {{ filmList.premiereAt | premTimer }}上映
          </div>
          <div class="conten-text">
            {{ filmList.nation }} | {{ filmList.runtime }}分钟
          </div>
          <div
            class="conten-text"
            style="line-height: 15px"
            :class="isHidden ? 'hidden' : ''"
          >
            {{ filmList.synopsis }}
          </div>
          <div
            class="conten-text"
            style="text-align: center"
            @click="isHidden = !isHidden"
          >
            <i
              class="iconfont"
              :class="isHidden ? 'icon-moreunfold' : 'icon-less'"
            ></i>
          </div>
        </div>
      </div>
      <div style="margin-top: 10px">
        <div style="16px">演职人员</div>
        <detail-swiper>
          <detail-swiper-item
            v-for="(data, index) in filmList.actors"
            :key="index"
          >
            <div
              :style="{ backgroundImage: 'url(' + data.avatarAddress + ')' }"
              class="actors"
            ></div>
            <div
              class="conten-text"
              style="font-size: 12px; text-align: center"
            >
              {{ data.name }}
            </div>
            <div
              class="conten-text"
              style="color: #797d82; font-size: 10px; text-align: center"
            >
              {{ data.role }}
            </div>
          </detail-swiper-item>
        </detail-swiper>
      </div>
      <div>
        <div class="photo">剧照</div>
        <detail-swiper>
          <detail-swiper-item
            v-for="(item, index) in filmList.photos"
            :key="index"
          >
            <div
              :style="{ backgroundImage: 'url(' + item + ')' }"
              class="photos"
              @click="handlePerview(index)"
            ></div>
          </detail-swiper-item>
        </detail-swiper>
      </div>
    </div>
  </div>
</template>
<script>
import http from '@/until/http'
import Vue from 'vue'
import moment from 'moment'
import detailSwiper from '@/components/detail/DetailSwiper'
import DetailHeader from '@/components/detail/DetailHeader'
import detailSwiperItem from '@/components/detail/DetailSwiperItem'
import { ImagePreview } from 'vant'

// import axios from 'axios'
Vue.filter('premTimer', (data) => {
  return moment(data * 1000).format('YYYY-MM-DD')
})
Vue.directive('scroll', {
  inserted (el, binding) {
    el.style.display = 'none'
    // window.onscroll = () => {
    //   if ((document.documentElement.scrollTop || document.body.scrollTop) > binding.value) {
    //     el.style.display = 'block'
    //   } else {
    //     el.style.display = 'none'
    //   }
    // }
    window.onscroll = () => {
      // console.log('scroll')
      if (
        (document.documentElement.scrollTop || document.body.scrollTop) >
        binding.value
      ) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  }
})
export default {
  components: {
    detailSwiper,
    detailSwiperItem,
    DetailHeader
  },
  data () {
    return {
      filmList: null,
      isHidden: true
    }
  },
  methods: {
    handlePerview (index) {
      ImagePreview({
        images: this.filmList.photos,
        startPosition: index,
        closeable: true,
        closeIconPosition: 'top-left'
      })
    }
  },
  created () {
    http({
      url: `/gateway?filmId=${this.$route.params.id}&k=1959967`,
      // type: 'GET',
      // dataType: 'JSONP',
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then((res) => {
      console.log(res.data.data.film)
      this.filmList = res.data.data.film
    })
  }
}
</script>
<style lang="scss" scoped>
.box {
  margin-left: 0.625rem;
}
.poster {
  width: 100%;
  height: 12.125rem;
  background-position: center;
  background-size: cover;
}
.center-name {
  font-size: 18px;
  margin-top: 10px;
}
.conten-text {
  margin-top: 4px;
}
.hidden {
  overflow: hidden;
  height: 30px;
}
.actors {
  width: 100%;
  height: 6.25rem;
  background-position: center;
  background-size: cover;
  margin-top: 5px;
}
.photo {
  margin-top: 10px;
  margin-bottom: 10px;
}
.photos {
  width: 100%;
  height: 62px;
  background-position: center;
  background-size: cover;
}
</style>
